<template>
  <div class="container">
    <div class="menu">
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        background-color="#F5F5F5"
      >
        <el-menu-item index="/manage/home" @click="gohome">
          <i class="el-icon-s-home"></i>
          <span slot="title">概况</span>
        </el-menu-item>
        <el-menu-item index="/manage/datalist" @click="godatalist">
          <i class="el-icon-document-copy"></i>
          <span slot="title">数据汇总</span>
        </el-menu-item>
        <el-menu-item v-if="false" index="/manage/chart" @click="gochart">
          <i class="el-icon-s-data"></i>
          <span slot="title">统计图表</span>
        </el-menu-item>
        <el-menu-item index="/manage/per" v-if="this.$store.state.power==-1" @click="goper()">
          <i class="el-icon-edit-outline"></i>
          <span slot="title">账号管理</span>
        </el-menu-item>
        <el-menu-item @click="dialogFormVisible = true">
          <i class="el-icon-unlock"></i>
          <span slot="title">修改密码</span>
        </el-menu-item>
        <el-menu-item @click="gourl">
          <i class="el-icon-s-cooperation"></i>
          <span slot="title">系统使用反馈</span>
        </el-menu-item>
        <el-menu-item @click="this.leave">
          <i class="el-icon-user-solid"></i>
          <span slot="title">退出登录</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>

    <!-- 修改密码弹出框 -->
    <el-dialog
      title="修改密码"
      :visible.sync="dialogFormVisible"
      center
      @close="notSubmit('okForm')"
      :width="diaWidth"
    >
      <div class="user">账号：{{this.$store.state.user.mobile}}</div>
      <el-form
        style="padding:0 20px;"
        label-width="auto"
        :rules="rules"
        label-position="left"
        :model="okForm"
        ref="okForm"
      >
        <el-form-item label="原密码" prop="old">
          <el-input
            placeholder="请输入原密码"
            v-model="okForm.old"
            show-password
            onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="new">
          <el-input
            placeholder="请输入新密码"
            v-model="okForm.new"
            show-password
            onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="new2">
          <el-input
            placeholder="请再次输入新密码"
            v-model="okForm.new2"
            show-password
            onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')"
          ></el-input>
        </el-form-item>
        <el-form-item id="buttonbox" style="text-align:center;">
          <el-button @click="notSubmit('okForm')">取消</el-button>
          <el-button type="primary" @click="okSubmit('okForm')">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    // 密码
    var validateNumber = (rule, value, callback) => {
      if (this.okForm.new.trim() == "") {
        callback(new Error("请输入密码"));
      } else if (this.okForm.new.trim().toString().length < 6) {
        callback(new Error("密码长度应在6位数以上"));
      } else {
        callback();
      }
    };
    var validateNumber2 = (rule, value, callback) => {
      if (this.okForm.old.trim() == "") {
        callback(new Error("请输入密码"));
      } else if (this.okForm.old.trim().toString().length < 6) {
        callback(new Error("密码长度应在6位数以上"));
      } else {
        callback();
      }
    };
    // 确认密码
    var validateNumber1 = (rule, value, callback) => {
      if (this.okForm.new2.trim() == "") {
        callback(new Error("请再次输入密码"));
      } else if (this.okForm.new2 !== this.okForm.new) {
        callback(new Error("密码输入不一致"));
      } else {
        callback();
      }
    };
    return {
      old: "",
      newpw: "",
      newpw2: "",
      dialogFormVisible: false,
      diaWidth: "500px", //diaing弹出框宽度
      btnflag: true, //确认按钮禁用
      okForm: {
        //弹出框数据
        old: "",
        new: "",
        new2: "",
        phone: ""
      },
      rules: {
        old: [{ required: true, validator: validateNumber2, trigger: "blur" }],
        new: [{ required: true, validator: validateNumber, trigger: "blur" }],
        new2: [{ required: true, validator: validateNumber1, trigger: "blur" }]
      }
    };
  },
  methods: {
    gohome() {
      if (this.$route.path == "/manage/home") {
        window.location.reload() || this.$router.go(0);
      }
      this.$router.push({ path: "/manage/home" });
    },
    godatalist() {
      if (this.$route.path == "/manage/datalist") {
        window.location.reload();
      }
      this.$router.push({ path: "/manage/datalist" });
    },
    gochart() {
      this.$router.push({ path: "/manage/chart" });
    },
    goper() {
      this.$router.push({ path: "/manage/per" });
    },
    gourl() {
      window.open("https://gdstx.fanqier.cn/f/jdjmtzhs");
    },
    leave() {
      this.$confirm("确定要退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        this.$store.commit("clean");
        this.$router.push({ path: "/" });
      });
    },
    //确认修改
    okSubmit(formName) {
      if (this.btnflag) {
        this.btnflag = false;
        this.$refs[formName].validate(valid => {
          if (valid) {
            let obj = { old: this.okForm.old, new: this.okForm.new };
            this.$axios
              .post("/api/user/changePass", obj)
              .then(res => {
                this.btnflag = true;
                if (res.data.code == "0000") {
                  this.$alert("修改成功,请重新登录!", {
                    confirmButtonText: "确定",
                    type: "success",
                    center: true
                  });
                  this.notSubmit(formName);
                  this.$store.commit("clean");
                  this.$router.push({ path: "/" });
                } else {
                  this.$alert("修改失败," + res.data.msg, {
                    confirmButtonText: "确定",
                    type: "error",
                    center: true
                  });
                }
              })
              .catch(err => {
                this.btnflag = true;
                this.$alert("网络错误" + err, {
                  confirmButtonText: "确定",
                  type: "error",
                  center: true
                });
              });
          } else {
            return false;
          }
        });
      }
    },
    //取消按钮
    notSubmit(formName) {
      this.dialogFormVisible = false;
      this.btnflag = true;
      this.$refs["okForm"].resetFields();
      this.okForm = {
        old: "",
        new: "",
        new2: "",
        phone: ""
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  .menu {
    width: 170px;
    .el-menu-vertical-demo {
      height: 700px;
      border-top: 2px double rgb(0, 117, 170);
    }
  }
  .main {
    margin-left: 30px;
    width: 1000px;
  }
  .user{
    font-size: 18px;
    width: 100%;
    text-align: center;
    margin-top: -20px;
    margin-bottom: 20px;
    color: #409eff;
  }
}
</style>